<template>
     <el-steps class="steps-container" :active="active" align-center>
        <el-step icon="el-icon-edit">
             <!-- 自定义标题插槽，用于显示标题和日期 -->
            <template v-if="active > 1" #icon>
                <el-icon ><Select /></el-icon>
            </template>
            <template #title>
                <span class="custom-step-title">下单</span>
            </template>
            <template #description>
                <span class="custom-step-description">{{formatDate(porps.orderData.createTime,2)}}</span>
            </template>
        </el-step>
        <el-step>
            <template v-if="active > 2" #icon>
                <el-icon @mouseenter="hoveredStep2 = 'show'"><Select /></el-icon>
            </template>
            <template #title>
                <span class="custom-step-title" @mouseenter="hoveredStep2 = 'show'">签署</span>
            </template>
            <template #description>
                <el-row v-if="hoveredStep2 == 'show'" @mouseenter="hoveredStep2 = 'show'" @mouseleave="hoveredStep2 = 'hide'" class="custom-step-description" justify="center" align="middle">
                    <el-col :span="24" class="text-center"><el-button type="primary" size="samll" plain @click="viewContract">查看合同</el-button></el-col>
                </el-row>
                <el-row v-else class="custom-step-description">
                    <el-col :span="24" v-if="porps.orderData.signDate">{{formatDate(porps.orderData.signDate,2)}}</el-col>
                    <el-col :span="24" v-else style="color: #ff0000;">合同未签署</el-col>
                </el-row>
            </template>
        </el-step>
        <el-step>
            <template v-if="active > 3" #icon>
                <el-icon @mouseenter="hoveredStep3 = 'show'"><Select /></el-icon>
            </template>
            <template #title>
                <span class="custom-step-title" @mouseenter="hoveredStep3 = 'show'">提箱({{porps.orderData.packedQuantity}}/{{porps.orderData.boxQuantity}})</span>
            </template>
            <template #description>
                <el-row v-if="hoveredStep3 == 'show'" @mouseenter="hoveredStep3 = 'show'" @mouseleave="hoveredStep3 = 'hide'" class="custom-step-description"  justify="center" align="middle">
                    <el-col :span="12" class="text-center"><el-button type="primary" plain @click="viewContainer('txd')">提箱单</el-button></el-col>
                    <el-col :span="12" class="text-center"><el-button type="primary" plain @click="viewContainer('txjl')">提箱记录</el-button></el-col>
                </el-row>
            </template>
        </el-step>
        <el-step :status="active > 2 ? 'finish' : 'wait'">
            <template v-if="active > 4" #icon>
                <el-icon @mouseenter="hoveredStep4 = 'show'"><Select /></el-icon>
            </template>
            <template #title><span class="custom-step-title" @mouseenter="hoveredStep4 = 'show'">财务</span></template>
            <template #description>
                <el-row v-if="hoveredStep4 == 'show'" @mouseenter="hoveredStep4 = 'show'" @mouseleave="hoveredStep4 = 'hide'" class="custom-step-description" justify="center" align="middle" gutter="20">
                    <template v-if="businessRoleEnum == 10">
                        <el-col :span="8" class="text-center"><el-button type="primary" plain @click="displayCost('fy')">费用</el-button></el-col>
                    </template>
                    <el-col :span="8" class="text-center"><el-button type="primary" plain @click="displayCost('zd')">账单</el-button></el-col>
                    <el-col :span="8" class="text-center"><el-button type="primary" plain @click="displayCost('fp')">发票</el-button></el-col>
                </el-row>
            </template>
        </el-step>
        <el-step>
            <template v-if="active > 5" #icon>
                <el-icon><Select /></el-icon>
            </template>
            <template #title>
                <span class="custom-step-title">
                    <template v-if="porps.status == 40">待取消</template>
                    <template v-else-if="porps.status == 35">已取消</template>
                    <template v-else>已完成</template>
                </span>
            </template>
            <template #description>
                <span class="custom-step-description">
                    <template v-if="porps.status > 35"><span style="color: #ff0000;">{{porps.orderData.remark}}</span></template>
                </span>
            </template>
        </el-step>
    </el-steps>
    <!-- 合同预览 -->
    <el-dialog v-model="constantDialog" title="合同" width="1000">
        <a :href="pdfSource" style="float: right;color: #2158f3;margin-right: 50px;">下载合同</a>
        <pdfViewer :url="pdfSource"></pdfViewer>
    </el-dialog>
    <!-- 查看提箱单/提箱记录 -->
    <el-drawer v-model="containerDialog" :with-header="false" size="50%">
        <span class="_before">提箱</span>
        <el-row class="marginTop20">
            <el-col :span="20">
                <el-tabs v-model="tableLayout" class="demo-tabs" @tab-change="viewContainer(tableLayout)">
                    <el-tab-pane label="提箱单" name="txd"></el-tab-pane>
                    <el-tab-pane label="提箱记录" name="txjl"></el-tab-pane>
                </el-tabs>
            </el-col>
            <template v-if="tableLayout == 'txd' && businessRoleEnum == 10">
                <el-col :span="4" class="text-right" v-if="businessRoleEnum == 10 && (porps.orderData.packingAllocationQuantity < porps.orderData.boxQuantity)" >
                    <template v-if="porps.status == 25 || porps.status == 30">
                        <el-button type="primary" plain size="small" @click="showPickingList">开提箱单</el-button>
                    </template>
                </el-col>  
            </template>
        </el-row>
        <template v-if="tableLayout == 'txd'">
            <el-table :data="pickUpListData" class="marginTop20" style="width: 100%" border>
                <el-table-column prop="packingNo" label="提箱单号" width="180" align="center"/>
                <el-table-column prop="carryCityName" label="提箱城市" width="100" align="center"/>
                <el-table-column prop="boxType" label="箱型" align="center">
                    <template #default="scope">
                        {{basicConfig.boxTypeInfo1[scope.row.boxType]}}
                    </template>
                </el-table-column>
                <el-table-column prop="boxCondition" label="箱况" align="center">
                    <template #default="scope">
                        {{basicConfig.boxConditionInfo2[scope.row.boxCondition]}}
                    </template>
                </el-table-column>
                <el-table-column prop="residuePackingDays" label="剩余提箱天数" width="120" align="center"/>
                <el-table-column prop="totalQuantity" label="总箱量" align="center"/>
                <el-table-column prop="packedQuantity" label="已提箱量" align="center"/>
                <el-table-column prop="totalQuantity" label="未提箱量" align="center">
                    <template #default="scope">
                        {{ scope.row.totalQuantity - scope.row.packedQuantity }}
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" fixed="right" width="150" align="center">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="downloadAtta(scope.row)">下载</el-button>
                        <!-- <el-button link type="primary" size="small" @click="previewList(scope.row)">查看</el-button> -->
                        <template  v-if="scope.row.status < 20">
                            <el-button link type="primary" size="small" @click="addPickupRecord(scope.row)">新增箱照</el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template v-else-if="tableLayout == 'txjl'">
            <el-table :data="allPickupRecord" class="marginTop20" style="width: 100%" border>
                <el-table-column prop="containerNo" label="箱号" width="180" align="center"/>
                <el-table-column prop="boxType" label="箱型" width="100" align="center">
                    <template #default="scope">
                        {{basicConfig.boxTypeInfo1[scope.row.boxType]}}
                    </template>
                </el-table-column>
                <el-table-column prop="boxCondition" label="箱况" width="100" align="center">
                    <template #default="scope">
                        {{basicConfig.boxConditionInfo2[scope.row.boxCondition]}}
                    </template>
                </el-table-column>
                <el-table-column prop="packingDate" label="提箱日期" width="120" align="center">
                    <template #default="scope">{{formatDate(scope.row.packingDate,2)}}</template>
                </el-table-column>
                <el-table-column prop="packingNo" label="提箱单号" width="220" align="center"/>
                <el-table-column prop="yardName" label="堆场名称" align="center"/>
            </el-table>
        </template>
    </el-drawer>
    <!-- 开提箱单 -->
    <el-drawer v-model="pickUpListDialog" :with-header="false" size="45%">
        <el-row>
            <el-col :span="6">
                <span class="_before">开提箱单</span>
            </el-col>
        </el-row>
        <el-row class="marginTop20">
            <el-col :span="5" class="text-right">售箱订单：</el-col>
            <el-col :span="18">
                <el-table :data="[porps.orderData]" border style="width: 100%" >
                    <el-table-column prop="orderNo" label="订单号" align="center"/>
                    <el-table-column prop="planPickupDate" label="预计提箱日期" align="center">
                        <template #default="scope">{{formatDate(scope.row.planPickupDate,2)}}</template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="下单日期" align="center">
                        <template #default="scope">{{formatDate(scope.row.createTime,2)}}</template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="已开箱量" align="center">
                        <template #default="scope">{{scope.row.packingAllocationQuantity}}</template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="未开箱量" align="center">
                        <template #default="scope">{{scope.row.boxQuantity - scope.row.packingAllocationQuantity}}</template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="需开箱量" align="center">
                        <template #default="scope">
                            <el-input type="number" v-model="needPackingNum"/>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row class="marginTop20">
            <el-col :span="5" class="text-right">箱型/箱况/箱量：</el-col>
            <el-col :span="18">
                <el-table :data="[porps.orderData]" border style="width: 100%" >
                    <el-table-column prop="boxType" label="箱型" align="center">
                        <template #default="scope">{{basicConfig.boxTypeInfo1[scope.row.boxType]}}</template>
                    </el-table-column>
                    <el-table-column prop="boxCondition" label="箱况" align="center">
                        <template #default="scope">{{basicConfig.boxConditionInfo2[scope.row.boxCondition]}}</template>
                    </el-table-column>
                    <el-table-column prop="boxQuantity" label="箱量" align="center">
                        <template #default="scope">{{needPackingNum}}</template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row style="width: 100%;" class="marginTop20">
            <el-col :span="5" class="text-right"><span class="_asterisk">提箱单有效期范围：</span></el-col>
            <el-col :span="18">
                <el-date-picker v-model="packingValidityPeriod" type="daterange" range-separator="~" start-placeholder="开始时间" end-placeholder="截至时间" style="width: 100%;"/>
            </el-col>
        </el-row>
        <el-row class="marginTop20" style="width: 100%;">
            <el-col :span="5" class="text-right">放箱单：</el-col>
            <el-col :span="18">
                <ImgUpload ref="packingRef" :displayType="3" :limit="10" :showNumber="6" :drag="true" :type="'jpg/png/jpeg/pdf'" />
            </el-col>
        </el-row>
        <el-row  class="marginTop30">
            <el-col :span="5" class="text-right">备注：</el-col>
            <el-col :span="18">
                <el-input v-model="packingRemark" :rows="5" type="textarea" maxlength="2000" show-word-limit placeholder="请输入备注信息"/>
            </el-col>
        </el-row>
        <el-row justify="center" align="middle" class="marginTop30">
            <el-col :offset="19" :span="3" class="text-right">
                <el-button type="primary" @click="submitPicking">提交</el-button>
            </el-col>
        </el-row>
    </el-drawer>
    <!-- 查看提箱预览 -->
    <el-dialog v-model="previewListDialog" width="1000">
        <span class="_before">查看提箱记录</span>
        <!-- <el-row class="marginTop20" justify="end">
            <el-col :span="4">应提箱量：</el-col>
            <el-col :span="4">实提箱量：</el-col>
        </el-row> -->
        <el-table :data="pickupRecord" border class="marginTop20">
            <el-table-column prop="containerNo" label="箱号" width="150" align="center"/>
            <el-table-column prop="boxType" label="箱型" width="80" align="center">
                <template #default="scope">
                    {{basicConfig.boxTypeInfo1[scope.row.boxType]}}
                </template>
            </el-table-column>
            <el-table-column prop="boxCondition" label="箱况" width="80" align="center">
                <template #default="scope">
                    {{basicConfig.boxConditionInfo2[scope.row.boxCondition]}}
                </template>
            </el-table-column>
            <el-table-column prop="packingDate" label="提箱日期" width="150" align="center">
                <template #default="scope">
                    {{formatDate(scope.row.packingDate,2)}}
                </template>
               
            </el-table-column>
            <el-table-column prop="buyBoxCompanyName" label="客户"  align="center"/>
        </el-table>
    </el-dialog>
    <!-- 添加提箱记录 -->
    <el-drawer v-model="addPickupRecordDialog" :with-header="false" size="45%">
        <span class="_before">添加提箱记录</span>
        <el-form ref="ruleRef" :model="pickupRecordList" :rules="rules" label-width="100px" class="marginTop20">
            <el-form-item label="提箱单号">{{ pickupRecordList.packingNo }}</el-form-item>
            <el-form-item label="选择订单" prop="yardName">
                <el-table ref="orderListref" :data="pickupRecordList.orderList" @selection-change="handleSelectionChange" style="width: 100%">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column label="订单号" prop="orderNo" width="300" align="center"/>
                    <el-table-column label="下单日期" prop="orderTime" width="120" align="center">
                        <template #default="scope">{{formatDate(scope.row.orderTime,2)}}</template>
                    </el-table-column>
                    <el-table-column label="已提箱量" prop="packedQuantity" align="center"/>
                    <el-table-column label="未提箱量" align="center">
                        <template #default="scope">{{ scope.row.totalQuantity - scope.row.packedQuantity }}</template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item label="堆场名称" prop="yardName"><el-input v-model="pickupRecordList.yardName" maxlength="50"></el-input> </el-form-item>
            <el-form-item label="箱型">{{ basicConfig.boxTypeInfo1[pickupRecordList.boxType] }} </el-form-item>
            <el-form-item label="箱况">{{ basicConfig.boxConditionInfo2[pickupRecordList.boxCondition] }}</el-form-item>
            <el-form-item label="司机信息" prop="driverInfo">
                <el-input v-model.trim="pickupRecordList.driverInfo" :maxlength="100" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="箱号" prop="containerNo">
                <el-input v-model.trim="pickupRecordList.containerNo"></el-input>
            </el-form-item>
        
            <el-form-item label="提箱日期" prop="packingDate">
                <el-date-picker v-model="pickupRecordList.packingDate" type="date" :editable="false" :clearable="false" placeholder="选择日期" :default-value="new Date()" />
            </el-form-item>
            <el-form-item label="提箱附件" prop="packingFileUrls">
                <ImgUpload ref="packingRef1" :type="'jpg/png/jpeg/pdf/zip'" :showNumber="6" :displayType="3" :limit="10" :drag="true"></ImgUpload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleAddPackingDetail">确定</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>
    <!-- 财务 -> 费用 -->
    <el-dialog v-model="displayCostDialog">
        <span class="_before">财务</span>
        <el-collapse v-model="activeNames" class="marginTop20" @change="handleChange">
            <el-collapse-item title="搜索条件" name="1" :icon="CaretRight">
                <el-form :model="displayCostSearch" :inline="true" label-width="68px">
                    <el-form-item style="width:190px">
                        <div>箱号</div>
                        <MultipleBoxNumbersDialog v-model.trim="displayCostSearch.containerNo" :multipleBoxInfo="customBoxInfo"/>
                    </el-form-item>
                    <el-form-item style="width:190px">
                        <div>业务编号</div>
                        <el-input v-model="displayCostSearch.businessNo" size="small"></el-input>
                    </el-form-item>
                    <el-form-item style="width:190px">
                        <div>状态</div>
                        <el-select v-model="displayCostSearch.writeOffStatus" size="small">
                            <el-option label="未建账单" value="5"/>
                            <el-option label="已建账单" value="10"/>
                            <el-option label="已对账" value="15"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="width:190px">
                        <div>费用名称</div>
                        <el-select v-model="displayCostSearch.feeCode" size="small">
                            <el-option v-for="(item,index) in basicConfig.expenseType" :key="index" :label="item.label" :value="item.value"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="width:190px">
                        <div>结算单位</div>
                        <el-select v-model="displayCostSearch.settlementCompanyType" size="small">
                            <el-option label="客户" value="5"/>
                            <el-option label="堆场" value="10"/>
                            <el-option label="第三方" value="15"/>
                            <el-option label="箱东" value="20"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="width:190px">
                        <div>结算流向</div>
                        <el-select v-model="displayCostSearch.settlementDirection" size="small">
                            <el-option label="应收" value="1"/>
                            <el-option label="应付" value="-1"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="width:190px">
                        <!-- <el-button size="small">重置</el-button>
                        <el-button type="primary" size="small" plain>搜索</el-button> -->
                    </el-form-item>
                    <el-form-item style="width:190px">
                        <div class="text-right" style="width: 100%;margin-bottom: -20px;">
                            <el-button size="small" @click="restFrom">重置</el-button>
                            <el-button type="primary" size="small" plain @click="submitSearch">搜索</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
        </el-collapse>
        <el-row class="marginTop20" align="middle">
            <el-col :span="12">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="费用" name="fy" v-if=" businessRoleEnum == 10"></el-tab-pane>
                    <el-tab-pane label="账单" name="zd"></el-tab-pane>
                    <el-tab-pane label="发票" name="fp"></el-tab-pane>
                </el-tabs>
            </el-col>
            <el-col :span="12" class="text-right">
                <el-button type="primary" plain size="small">全选</el-button>
                <el-button type="primary" plain size="small" @click="exportFinanceList">导出</el-button>
                <el-button type="primary" plain size="small" @click="createBill">新建账单</el-button>
            </el-col>
        </el-row>
        <el-table :data="financeInfo">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column prop="businessNo" label="业务编号" align="center" width="200" />
            <el-table-column prop="refNo" label="箱号" align="center" width="200" />
            <el-table-column prop="refType" label="业务类型" align="center">
                <template #default="scope">
                    {{basicConfig.refType[scope.row.refType]}}
                </template>
            </el-table-column>
            <el-table-column prop="feeCode" label="费用名称" align="center">
                <template #default="scope">
                    {{basicConfig.expenseType1[scope.row.feeCode]}}
                </template>
            </el-table-column>
            <el-table-column prop="deductAmount" label="金额" align="center" />
            <el-table-column prop="settlementCompanyName" label="结算单位" align="center" width="200"/>
            <el-table-column prop="remark" label="备注" align="center" width="150"/>
            <el-table-column prop="writeOffStatus" label="状态" fixed="right" align="center">
                <template #default="scope">
                    {{basicConfig.writeOffStatus[scope.row.writeOffStatus]}}
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch, computed, getCurrentInstance} from 'vue'
import { ElMessage, ElLoading,ElMessageBox } from 'element-plus'
import { getPackingList, addPackingBoxSell, orderBoxQty, downloadStutas} from '@/api/boxDeal/tiXiangManage'
import { saleBoxPage, addPackingDetail,saleBoxList } from '@/api/boxDeal/tiXiangManageDetail';
import ImgUpload from '@/components/upload/uploadFiles-Images'
import MultipleBoxNumbersDialog from '@/components/dialog/multipleBoxNumbersDialog'
import { formatContainerNo } from '@/utils/mlpBox' // 格式化箱号
import { selectFeeDetailsListByOrderId } from '@/api/financial/operatingInfo'
import { CaretRight } from '@element-plus/icons-vue'
import pdfViewer from '@/components/pdf'
import { formatDate } from '@/utils'
import basicConfig from '@/constant/containerInfo'
import { downloadIamge } from '@/utils/download'
import { showFullScreenLoading, tryHideFullScreenLoading } from '@/tools/el-loading'
const customBoxInfo = {  //多箱号 提示信息
  placeholder1:'请输入',
  title:'输入箱号',
  placeholder2:'请输入多个箱号以英文逗号隔开',
  button:'多箱号',
  size:'small'
}
const active = ref(2)
const porps = defineProps({
    status:{
        type: Number,
        default: 2
    },
    orderData: {
        type: Object,
        default: () => { }
    },
    businessRoleEnum:{ // 5：买箱公司  10：卖箱公司
        type: Number,
        default: 0
    }
})

const hoveredStep1 = ref("hide") //show:显示 hide：隐藏
const hoveredStep2 = ref("hide") //show:显示 hide：隐藏
const hoveredStep3 = ref("hide") //show:显示 hide：隐藏
const hoveredStep4 = ref("hide") //show:显示 hide：隐藏
const hoveredStep5 = ref("hide") //show:显示 hide：隐藏
const hoveredStep6 = ref("hide") //show:显示 hide：隐藏
// 订单所处流程节点的 
    // active.value = 1 (下单) =>  2-待确认
    // active.value = 2（签署）=>  3-待审核
    // active.value = 3（提箱）=>  10-待开发票 15-未收 20-已收 25-待提 30-已提
    // active.value = 5（财务）=>  
    // active.value = 6（完成）=>  35：已完成 40：已取消 45:待取消
watch(() => porps.status,(newValue)=>{ 
    if(newValue < 3){
        active.value = 1 
    }else if(newValue >= 3 && newValue < 10){ 
        active.value = 2 
    }else if(newValue >= 10 && newValue < 35){
        active.value = 3 
    }else if(newValue >= 30 && newValue < 40){
        active.value = 4 
    }else if(newValue >= 35){
        active.value = 5 
    }
})
const pdfSource = computed(() => JSON.parse(porps.orderData.downloadUrl)?.url || '');
const constantDialog = ref(false);
const viewContract = () => { 
    const contractUrl = JSON.parse(porps.orderData.downloadUrl)?.url || ''
    if(!contractUrl) return ElMessage.warning('合同未生成，请先完成合同签署')
    constantDialog.value = true
}

const tableLayout = ref("txd") // txd:显示提箱单 txjl:显示提箱记录
const containerDialog = ref(false);
const pickUpListData = ref([])
const allPickupRecord = ref([])
const viewContainer = async(lay:string) => { 
    if(lay == 'txd'){
        tableLayout.value = 'txd'
        await getPackingList(porps.orderData.id).then(res => { 
            tryHideFullScreenLoading()
            clearInterval(hxIntervalId)
            if(res.code == '00000'){
                pickUpListData.value = res.data
            }else{
                ElMessage.error(res.message)
            }
        }).catch((error) => {
        ElMessage.error(error)
        })      
    }else if(lay == 'txjl'){
        tableLayout.value = 'txjl'
        await saleBoxList(porps.orderData.id).then(res => {
            if(res.code == "00000"){
                allPickupRecord.value = res.data
            }
        })
    }
    containerDialog.value = true
}

// 开提箱单
const pickUpListDialog = ref(false)
const packingValidityPeriod = ref([])
const packingRemark = ref('')
const packingRef = ref()
const needPackingNum = ref(0)
const previewListDialog = ref(false) //预览提箱单
const showPickingList = () =>{ 
    needPackingNum.value = porps.orderData.boxQuantity - porps.orderData.packingAllocationQuantity
    pickUpListDialog.value = true
}
let hxIntervalId:any
const submitPicking = async() =>{
    const rowData = porps.orderData
    const orderListData = [{
        orderId: rowData.id,
        orderNo: rowData.orderNo,
        planPickupDate: rowData.planPickupDate,
        createTime: rowData.createTime,
        needPackQuantity: needPackingNum.value
    }]
    const reqParam = {
        boxType:rowData.boxType,
        boxCondition: rowData.boxCondition,
        orderList: JSON.stringify(orderListData),
        packingValidityPeriodStart: packingValidityPeriod.value[0],
        packingValidityPeriodEnd: packingValidityPeriod.value[1],
        packingFileList: JSON.stringify(packingRef.value.fileList),
        remark: packingRemark.value
    }
    await addPackingBoxSell(reqParam).then(res => {
        if(res.code == "00000"){
            showFullScreenLoading({tips:'放箱单生成中....'})
            hxIntervalId = setInterval (() => {
                viewContainer('txd')
                pickUpListDialog.value = false
            }, 500)
           
        }else{
            ElMessage.warning(res.msg)
        }
    }).catch(error => {
        ElMessage.error(error)
    })
}
// 查看提箱记录
const pickupRecord = ref([])
const previewList = async(packing:any)=>{
    await saleBoxPage({packingNo:packing.packingNo}).then(res => {
        if(res.code == '00000'){
            pickupRecord.value = res.data.list || []
        }else{
            ElMessage.warning(res.msg)
        }
    }).catch(error => {
        ElMessage.warning(error)
    })
    previewListDialog.value = true 
}

// 新增提箱记录
const pickupRecordList = reactive({
    id:'',
    packingNo: "",
    yardName:'',
    boxType:'',
    boxCondition:'',
    driverInfo:'',
    containerNo:'',
    packingDate:'',
    orderList:[]
})
const addPickupRecordDialog = ref(false)
const addPickupRecord = (packing:any) => {
    pickupRecordList.id = packing.id
    pickupRecordList.packingNo = packing.packingNo
    pickupRecordList.boxType = packing.boxType
    pickupRecordList.boxCondition = packing.boxCondition
    orderBoxQty(packing.id).then((res: any) => { 
    if(res.code == '00000'){
        pickupRecordList.orderList = res.data || []
    }
    addPickupRecordDialog.value = true
  })
}
const selectedItems = ref<any[]>([])
const orderListref = ref()
const handleSelectionChange = (selection: any[]) =>{
    selectedItems.value = selection
    if (selection.length > 1) {
      // 如果选择了多行，只保留最后一行
      orderListref.value?.clearSelection();
      orderListref.value?.toggleRowSelection(selection[selection.length - 1]);
    }
}
const { proxy } = getCurrentInstance();
const packingRef1 = ref()
const handleAddPackingDetail = async () => {
  proxy.$refs.ruleRef.validate(valid => {
    if (valid) {
      const imgList = packingRef1.value.fileList || []
      if(selectedItems.value.length < 1) return ElMessage.error('请选择订单')
      const data = {
        "packingId":pickupRecordList.id,
        "containerNo": pickupRecordList.containerNo,
        "driverInfo": pickupRecordList.driverInfo,
        "packingDate": pickupRecordList.packingDate,
        "yardName": pickupRecordList.yardName,
        "detailFileList": JSON.stringify(imgList) || null,
        "isChangeBox": 10, //是否换箱 5-是  10-否 
        // "oidContainerNo": param.isChangeBox == '5' ? param.oidContainerNo : null,
        "orderId": selectedItems.value[0].orderId || ''
      }
      addPackingDetail(data).then((res: any) => {
        addPickupRecordDialog.value = false
      })
    } else {
      return false
    }
  })
}

// 财务-> 费用
const activeNames = ref('1')
const activeName = ref('fy') //fy:费用 zd:账单 发票：fp
const financeInfo = ref([])
const displayCostDialog = ref(false)
const displayCostSearch = reactive({
    containerNo:'',
    businessNo:'',
    writeOffStatus:'', //是否生成对账单  5-未建账单 10-已建账单 15-已对账
    feeCode:'', //5-修箱费 10-提箱费  15-翻箱费  20-其他费  25-超期费 30-吊装费  35-堆存超期费 40-租入费 45-租出费 50-购箱费 55-卖箱费 60-箱贴费 65-订单金额 70-折旧费
    settlementCompanyType:'', //5-客户  10-堆场  15-第三方  20-箱东
    settlementDirection:'' // 应收:1 应付:-1
})
// 财务 - 清除筛选信息
const restFrom = () => {
    displayCostSearch.containerNo = ''
    displayCostSearch.businessNo = ''

}
// 财务 -> 筛选搜索
const submitSearch = async() => {
    financeInfo.value.length = 0
    if(activeName.value == 'fy'){ //费用
        const data = {
            orderId:porps.orderData.id
        }
        await selectFeeDetailsListByOrderId(data).then(res=>{
            if(res.code == "00000"){
                financeInfo.value = res.data.list || []
            }else{
                ElMessage.warning(res.msg)
            }
        }).catch(error => {
            ElMessage.error(error)
        })

    }else if(activeName.value == 'zd'){ //账单
        const data = {
            orderId:porps.orderData.id
        }
        await selectFeeDetailsListByOrderId(data).then(res=>{
            if(res.code == "00000"){
                financeInfo.value = res.data.list || []
            }else{
                ElMessage.warning(res.msg)
            }
        }).catch(error => {
            ElMessage.error(error)
        })
    }else if(activeName.value == 'fp'){ //发票
        const data = {
            orderId:porps.orderData.id
        }
        await selectFeeDetailsListByOrderId(data).then(res=>{
            if(res.code == "00000"){
                financeInfo.value = res.data.list || []
            }else{
                ElMessage.warning(res.msg)
            }
        }).catch(error => {
            ElMessage.error(error)
        })
    }
}
const displayCost = (type:string) =>{
    activeName.value = type
    submitSearch()
    displayCostDialog.value = true
}

const handleClick = (tab) => {
    activeName.value = tab.props.name
    submitSearch()
}
// 下载附件
const downloadAtta = (row:any) => {
    if (row.packingFileList) {
        const pdfFile = JSON.parse(row.packingFileList)
        if (pdfFile.length < 1 || !pdfFile[0].url) return ElMessage.warning('没有找到提箱单')
        downloadIamge(pdfFile[0].url,pdfFile[0].originalFileName || new Date(Date.now()+28800000).toISOString())
    } else {
        ElMessage.error('没有找到提箱单')
    }
}
// 导出费用信息
const exportFinanceList = () =>{
    if(activeName.value = 'fy'){ //导出费用

    }else if(activeName.value = 'zd'){ //导出账单

    }else if(activeName.value = 'fp'){ //导出发票

    }
}
// 新建账单
const createBill = () => {

}
const rules = ref({
  yardName: [{ required: true, message: "不能为空", trigger: "blur" }],
  driverInfo: [
    { required: true, message: "不能为空", trigger: "blur" },
    { pattern: /^[^\uD800-\uDBFF\uDC00-\uDFFF\uD83C\uDDE6-\uDDFF\u2000-\u206F]+$/, message: '不允许输入表情符号', trigger: 'blur' }
  ],
  containerNo: [
    { required: true, message: "不能为空", trigger: "blur" },
    { pattern: /^[A-Z]{3}U\d{7}$/, message: "箱号格式为4个大写字母+7个数字", trigger: "blur" }
  ],
  oidContainerNo: [{ required: true, message: "不能为空", trigger: "blur" }],
  packingDate: [{ required: true, message: "不能为空", trigger: "blur" }],
  packingFileUrls: [{ required: false, message: "不能为空", trigger: "blur" }],
  orderList: [{ required: true, message: "不能为空", trigger: "blur" }],
  // email: [{ required: true, message: "邮箱地址不能为空", trigger: "blur" }, { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
  // phonenumber: [{ required: true, message: "手机号码不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
});
onMounted(()=>{})

</script>
<style lang="scss" scoped>
.steps-container{
    margin-left: -5%;
    width: 110%;
    min-width: 800px 
}
.steps-container :deep(.el-divider--horizontal){
    margin-top: 10px !important;
}
.steps-container :deep(.el-step__line) {
  height: 4px !important; /* 加粗线条 */
  background-color: #F5F5F5; /* 默认状态颜色 */
}
.steps-container :deep(.el-step__line-inner) {
  height: 4px !important; /* 加粗线条 */
  background-color: #2158F3; /* 默认状态颜色 */
}

.steps-container :deep(.el-step__icon) {
  width: 30px;
  height: 30px;
  border: none;
  background-color: #F8F8F8;
  color: #999999;
}
.steps-container :deep(.is-finish .el-step__icon) {
    background-color: #2158F3;
}
.steps-container :deep(.is-finish .is-icon) {
    color: #FFFFFF;
    border-radius: 50%;
}
.steps-container :deep(.is-finish .el-step__icon-inner) {
  color: #FFFFFF; /* 默认状态颜色 */
}

.steps-container :deep(.is-finish) { // 当前步骤

}
.steps-container :deep(.is-process) { // 下一步骤

}
.steps-container :deep(.is-process) { // 下一步骤

}
.custom-step-description{
    height: 40px;
}
</style>